<template>
	<div class="tabbar_box">
		<div :class="['tabbar_item',curKey == index ? 'active':'']" v-for="(item,index) in tabList" :key="index" @click="jump(index)">
			<span :class="['tab_icon','iconfont','icon-'+item.icon]"></span>
			<span class="tab_font">{{item.name}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				curKey:0,
				tabList:[
					{name:'首页',icon:'shouye'},
					{name:'活动',icon:'community'},
					{name:'vip',icon:'vip1'},
					{name:'消息',icon:'xiaoxizhongxin'},
					{name:'我的',icon:'wode'},
				]
			}
		},
		methods: {
			jump(index){
				this.curKey = index;
				switch(index){
					case 0:
						uni.switchTab({
							url:'/pages/home/index'
						})
						break;
					case 1:
						uni.switchTab({
							url:'/pages/home/index'
						})
						break;
					case 2:
						uni.switchTab({
							url:'/pages/active/index'
						})
						break;
					case 0:
						uni.switchTab({
							url:'/pages/vip/index'
						})
						break;
					case 3:
						uni.switchTab({
							url:'/pages/home/index'
						})
						break;
					case 3:
						uni.switchTab({
							url:'/pages/message/index'
						})
						break;
					case 4:
						uni.switchTab({
							url:'/pages/my/index'
						})
						break;
					default:
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

.tabbar_box{
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ccc;
	.tabbar_item{
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #ccc;
		.tab_icon{
			font-size: 40rpx;
			margin-bottom: 4rpx;
		}
		.tab_font{
			font-size: 28rpx;
		}
	}
	.active{
		color: #1c6ad7;
	}
}

</style>
